<template>
  <div style="height: 95vh; position: relative">
    <n-layout position="absolute">
      <n-layout-header style="height: 64px; padding: 24px" bordered> 搜索栏 </n-layout-header>
      <n-layout has-sider position="absolute" style="top: 64px; bottom: 64px">
        <n-layout-sider bordered content-style="padding: 24px;"> 海淀桥 </n-layout-sider>
        <n-layout content-style="padding: 24px;">
          <n-card content-style="padding: 0;" v-for="i in 16" :key="i">
            <n-tabs type="line" size="large" :tabs-padding="20" pane-style="padding: 20px;">
              <n-tab-pane name="PARKLIFE"> PARKLIFE </n-tab-pane>
              <n-tab-pane name="ROCKLIFE"> ROCKLIFE </n-tab-pane>
            </n-tabs>
          </n-card>
        </n-layout>
      </n-layout>
      <n-layout-footer bordered position="absolute" style="height: 64px; padding: 24px"> 城府路 </n-layout-footer>
    </n-layout>
  </div>
</template>

<script setup>
import { h } from "vue";
import { NIcon } from "naive-ui";
import { BookOutline as BookIcon, PersonOutline as PersonIcon, WineOutline as WineIcon } from "@vicons/ionicons5";
</script>
